<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
     -->
    <script src="../../node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <!-- 插值表达式语法 -->
        <p>{{boolean1}}</p>
        <p>num:{{num}}</p>
        <p>undefind:{{un}}</p>
        <p>nul:{{nul}}</p>
        <p>arr:{{arr}}</p>
        <p>obj:{{obj}}</p>
        <p>fun:{{doublenum()}}</p>

        <!-- 插值表达式中使用表达式 -->
        <p>运算符: {{boolean1 ||'ok'}}</p>
        <p>运算符: {{false &&'ok'}}</p>
        <p>运算符:{{un??num}} </p>
        <p>加减乘除运算:{{num*100+1}}</p>

        <!-- 三目运算符 -->
        <p>{{obj.age>22?'可以结婚':'赶紧挣钱把'}}</p>
        <p>{{str.substr(0,2)}}</p>
        <p>{{alert(123)}}</p>

        <!-- 定义事件 -->
        <button @click="doublenum">点击事件</button>
    </div>
</body>

</html>
<script>
    // 包管理工具npm cnpm yarn 可以通过该包管理工具去下载对应的文件包到本地, 然后就可以在本地引入使用了 
    // 插值表达式: 
    // 在vue 中. 将变量放在 {{}} 语法中, 这样vue 就可以解析这个数据了. {{}}=> 插值表达式
    const { createApp } = Vue;
    const vm = createApp({
        data() {
            return {
                boolean1: true,
                num: 100,
                un: undefined,
                nul: null,
                arr: ['a', 'b', 'c'],
                obj: {
                    name: '2220',
                    age: 20
                },
                str: '千锋我最帅'

            }
        },
        methods: {
            doublenum() {
                // 注意: methods 中的所有的方法中的this 指向 当前实例 vm
                // console.log(this);
                // console.log(vm);
                return this.num * 2
            },
            alert(num) {
                window.alert(num)
            }
        }
    }).mount('#app') 
</script>